import 'dart:developer';

import 'package:FlutterDemo/widget/practicalextension/flutterbloc/practicale/blocs/MoviesBloc.dart';
import 'package:FlutterDemo/widget/practicalextension/flutterbloc/practicale/ui/movie_detail.dart';
import 'package:flutter/material.dart';

import 'practicale/models/CommonEntry.dart';

/// 资料: https://www.jianshu.com/p/9587b9b60671
/// https://medium.com/codechai/architect-your-flutter-project-using-bloc-pattern-part-2-d8dd1eca9ba5
/// 项目地址: https://github.com/SAGARSURI/MyMovies
class SampleFlutterBloc4 extends StatelessWidget {
  const SampleFlutterBloc4({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Sample FlutterBloc",
      home: _SampleFultterBlocWidget(),
    );
  }
}

class _SampleFultterBlocWidget extends StatefulWidget {
  const _SampleFultterBlocWidget({Key? key}) : super(key: key);

  @override
  _SampleFultterBlocWidgetState createState() => _SampleFultterBlocWidgetState();
}

class _SampleFultterBlocWidgetState extends State<_SampleFultterBlocWidget> {
  final moviesBloc = MoviesStreamBloc();

  @override
  void initState() {
    super.initState();
    // 数据 加载
    moviesBloc.featchAllMovies();
  }

  @override
  void dispose() {
    moviesBloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample FlutterBloc"),
      ),
      body: StreamBuilder(
        //监听流,当流中的数据发生变化(调用过sink.add时，此处会接收到数据的变化并且刷新UI)
        stream: moviesBloc.allMovies,
        builder: (context, AsyncSnapshot<PhoneEntry> snapshot) {
          if (snapshot.hasData) {
            return buildList(snapshot);
          } else if (snapshot.hasError) {
            return Text(snapshot.error.toString());
          }
          return Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }

  Widget buildList(AsyncSnapshot<PhoneEntry> snapshot) {
    return buildGridView(snapshot);
  }

  ListView buildListView(AsyncSnapshot<PhoneEntry> snapshot) {
    return ListView.separated(
        itemBuilder: (context, index) {
          var len = snapshot.data!.list.length;
          log("index: $index , list-len: ${len} , newIndex: ${index % len}");
          return Container(
            height: 100,
            color: Colors.primaries[index % Colors.primaries.length],
            child: Center(
              child: Text(
                "${snapshot.data!.list[index].value}",
                style: Theme.of(context).textTheme.headline3,
                textAlign: TextAlign.center,
              ),
            ),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
        itemCount: snapshot.data!.list.length);
  }

  Widget buildGridView(AsyncSnapshot<PhoneEntry> snapshot) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemCount: snapshot.data!.list.length,
      itemBuilder: (BuildContext context, int index) {
        return GridTile(
          child: InkResponse(
            child: Container(
              color: Colors.primaries[index % Colors.primaries.length],
              child: Center(
                child: Text(
                  "${snapshot.data!.list[index].value}",
                  style: TextStyle(fontSize: 32, color: Colors.white),
                ),
              ),
            ),
            onTap: () => openDetailPage(snapshot.data!.list[index], index),
          ),
        );
      },
    );
  }

  openDetailPage(CommonEntry data, int index) {
    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return MovieDetailPage();
    }));
  }
}
